Feature/new demo site #1046

eltonmesquita · 2020-04-25T19:35:58Z

This PR restructure and implements a new layout for the demo website. You can see it live here.

New layout by @daneden 🎉🎉🎉
Merges the gh-pages branch with the current branch (dev), so everything can be automated
Animation list is automatically generated directly from the animate.css file
The Readme file was split for easy updates and gets compiled and injected in the template file (I've written a very simple static generator)
The demo website now holds the whole library documentation
The structure is easy to understand and maintain and there's just 1 dependency to make the maintenance easier
The docs still need to be rewritten and I'll make a PR soon defining a few things I think are important
Cross-browser testing

Solves #837 .

Update home page with rubberBand animation

Red-orange-brown isn’t a great first impression.

Fixes Chrome’s SSL issue

Donations are weird, and only US account holders could use this.

This is a simple commit, bringing animate.css up to date with the current master version.

This is a simply update to the Animate.min.css file, to reflect the current version

…out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown.

I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately.

…s, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations.

@daneden

As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request.

…into Gabrielmtn-gh-pages

Closes #367, #340

Made it the new version

Update project page

ianvizarra · 2020-05-01T16:07:56Z

Should it be like this..

Rather than this?

I personally like the white background.

jkga · 2020-05-01T16:15:57Z

The logo and the button are not centered
Dimension: 414x736

warengonzaga · 2020-05-01T16:25:09Z

@eltonmesquita do you have step to contribute to the demo site? So we can PR for proposed changes?

eltonmesquita · 2020-05-01T16:45:15Z

Hi, thanks for the heads up. The intro part is not full-screen on purpose, so people can see that there's documentation right bellow that. It was something agreed previously with @daneden .

The docs/demo-site now reside in the ./docs folder. To contribute with the documentation, just edit any md file in the ./docs/pages folder. The template - which gets the MD files injected - resides on ./docs/template.html. The CSS on ./doc/dist/style.css and javascript on ./docs/dist/modules.

There's no bundler or anything for CSS or Javascript, the compile step, npm run docs, just compile the Animate.css library to the dist folder, then compile and injects the MD files into the template.html file generating the ./docs/dist/index.html file.

It's much less complicated then it sounds. Just have a look at the ./docs folder and you'll get how it works!

warengonzaga · 2020-05-01T17:05:44Z

Hi, thanks for the heads up. The intro part is not full-screen on purpose, so people can see that there's documentation right bellow that. It was something agreed previously with @daneden .

Hi @eltonmesquita, how about adding "getting started" and it will smooth scroll to documentation? What about that?

eltonmesquita · 2020-05-04T13:42:25Z

The problem of implementing the "Getting Started" button is that we'll 2 buttons on mobile, which we want to avoid. Do you see the way it is today as an issue? can you detail on that?

warengonzaga · 2020-05-04T14:14:48Z

The problem of implementing the "Getting Started" button is that we'll 2 buttons on mobile, which we want to avoid. Do you see the way it is today as an issue? can you detail on that?

Alright, it is not really an issue to me... that's only my suggestion from my perspective.

What do you think? @eltonmesquita

daneden · 2020-05-04T14:23:41Z

Ohhh this is looking great so far! Thanks so much for working on it @eltonmesquita! I have a few pieces of design feedback:

Could we use a more subtle/coordinated animation on initial load for the text? Maybe zoomInDown for both of them, perhaps with a very slight delay between heading and subtitle?
Now that I’m seeing it IRL, maybe the "above-the-fold" section should be calc(100vh - 2.8rem) (2.8rem is roughly the size of the "documentation" banner)
- Also related, maybe it would be nice to add a little gradient fade-out to the bottom of the scrollable list of animations to make it more clear that the area is scrollable?
A tooltip on the “copy” buttons would be nice! (e.g. "Copy class name to clipboard")
- For accessibility reasons, I’d encourage making those actual button elements with the title attribute acting as the tooltip
For code blocks, maybe reduce the relative font size (perhaps .8em) since monospace fonts appear larger
- Also for code blocks, a slight border radius would be nice (probably .25em or so)

daneden · 2020-05-04T14:24:20Z

The problem of implementing the "Getting Started" button is that we'll 2 buttons on mobile, which we want to avoid. Do you see the way it is today as an issue? can you detail on that?

I don’t think two buttons on mobile is the end of the world FWIW :) and I like the suggestion of having it smooth scroll to docs @warengonzaga!

warengonzaga · 2020-05-04T14:28:03Z

@daneden thank you! Also, I notice that the look and feel of the demo site is something similar to the branding of FedEx. Do you guys notice that? or only me?

eltonmesquita · 2020-05-04T14:42:30Z

Cool, I'll start working on the feedbacks. @daneden , I've also rewritten the whole documentation and added some more sections, it's on the live demo already. Any feedback on it would be great!

daneden

@eltonmesquita you did SUCH a great job with the content writing here. I love the voice and tone and it’s definitely in the spirit of the project (“web-things” is a lovely term!). Added some comments for changes!

docs/pages/00-intro.md

docs/pages/01-usage.md

docs/pages/02-utilities.md

docs/pages/03-best-practices.md

docs/pages/07-custom-builds.md

eltonmesquita · 2020-05-04T16:30:37Z

Could we use a more subtle/coordinated animation on initial load for the text? Maybe zoomInDown for both of them, perhaps with a very slight delay between heading and subtitle?

It's actually totally random today. Every page reload is a new combination of entrance animations. Although I did like some of the random animations, sometimes it feels out of place. I did want some opinions on that! I think I'll switch to something more coordinated then.

eltonmesquita · 2020-05-05T16:27:00Z

The last commit fixes:
[x] Use a more subtle/coordinated animation on initial load for the text
[x] "Above-the-fold" section should be calc(100vh - 2.8rem)
[ ] It would be nice to add a little gradient fade-out to the bottom of the scrollable list of animations to make it more clear that the area is scrollable. There's a browser bug - maybe specs quirks - that makes the element holding the gradient scroll with the list. I'm investigating it, but I think this is a non-blocker.
[x] A tooltip on the “copy” buttons.
[x] Make copy icons actual button elements with the title attribute acting as the tooltip. Done with a few adjustments.
[x] For code blocks reduce the relative font size
[x] For code blocks, adds a slight border radius

The live demo is updated.

daneden · 2020-05-05T17:20:12Z

There's a browser bug - maybe specs quirks - that makes the element holding the gradient scroll with the list. I'm investigating it, but I think this is a non-blocker.

Ohhh interesting! Yeah I don’t think it’s a blocker, and the change to the section height actually seems to help.

I have one last tiny request, which is to increase the padding and font size of the tooltips a little. They're a bit too tiny right now!

docs/dist/style.css

…list

daneden · 2020-05-05T19:18:30Z

This looks good to me 😃 awesome work! It’s yours to merge when you’re ready.

daneden · 2020-05-05T19:27:34Z

Also yikes, that FOSSA check takes a while to run. I wonder if we want to remove it, or at least make it a non-blocking check.

eltonmesquita · 2020-05-05T19:29:00Z

Also yikes, that FOSSA check takes a while to run. I wonder if we want to remove it, or at least make it a non-blocking check.

Yeah, might be a good idea!

@daneden

* New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <[email protected]> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <[email protected]> Co-authored-by: Christian Oliff <[email protected]> Co-authored-by: Daniel Eden <[email protected]> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options 🔨 * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <[email protected]> Co-authored-by: Waren Gonzaga <[email protected]> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue #739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <[email protected]> Co-authored-by: Matt Willis <[email protected]> Co-authored-by: Gabrielmtn <[email protected]> Co-authored-by: Indy Prieto <[email protected]> Co-authored-by: Robert Pemberton <[email protected]> Co-authored-by: Khaled nuur <[email protected]> Co-authored-by: Vladimir Jovanović <[email protected]> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <[email protected]> Co-authored-by: Arda Gedik <[email protected]> Co-authored-by: Jabran Rafique <[email protected]> Co-authored-by: Waren Gonzaga <[email protected]> Co-authored-by: Jabran Rafique⚡️ <[email protected]> Co-authored-by: Vaibhav Tandon <[email protected]> Co-authored-by: Waren Gonzaga <[email protected]> Co-authored-by: Melek REBAI <[email protected]> Co-authored-by: Christian Oliff <[email protected]> Co-authored-by: Daniel Eden <[email protected]> Co-authored-by: Lucas Ferreira Lima <[email protected]> Co-authored-by: Matt Willis <[email protected]> Co-authored-by: Gabrielmtn <[email protected]> Co-authored-by: Indy Prieto <[email protected]> Co-authored-by: Robert Pemberton <[email protected]> Co-authored-by: Khaled nuur <[email protected]> Co-authored-by: Vladimir Jovanović <[email protected]>

daneden and others added 30 commits January 20, 2014 17:31

Simplify & centralize the Animate.css home page. Finally.

82a4268

Design tweak

aac33c2

Fix Lightspeed demos

e8b9e05

Fix Lightspeed demos (cont.)

b10fccd

Trigger animation on change as well as click

d5d0861

Correct jQuery example. Fixes #127

ee75b81

Remove Readme on gh-pages to prevent mistakes like ee75b81

755f126

Use animate.min.css because whatever

244f9dc

Update demo page with MS animation JS hooks.

83287b8

Updating home page with rubberBand animation.

ec12cc1

Merge pull request #155 from mrwillis21/gh-pages

b02b8d7

Update home page with rubberBand animation

Reverse hue animation

ac589b5

Red-orange-brown isn’t a great first impression.

Add readme, use cssmin minified CSS instead of csso

b76b02a

Update gh-pages

5d90042

Remove protocol from urls

2a1fad0

Fixes Chrome’s SSL issue

Remove Square Cash link

41fd94b

Donations are weird, and only US account holders could use this.

Merge branch 'gh-pages' of github.com:daneden/animate.css into gh-pages

fb2f556

Updating Gh-page animate.css to the current version

2915633

This is a simple commit, bringing animate.css up to date with the current master version.

Updating Gh-page animate.min.css to reflect the current version

cf23a42

This is a simply update to the Animate.min.css file, to reflect the current version

Update CSS

4cf0f2d

Updating Gh-page index.html to the reflect the addition of zooms (in …

b5926be

…out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown.

refactoring index.html to mimic the current optgroup styling

b6141f7

I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately.

updated index.html to reflect the standard optgroup styling on slider…

6b5a93d

…s, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations.

Merging updated version of animate.min.css

f80d456

As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request.

Merge branch 'gh-pages' of https://github.com/Gabrielmtn/animate.css …

f7e4bd1

…into Gabrielmtn-gh-pages

Merge branch 'Gabrielmtn-gh-pages' into gh-pages

79add74

Closes #367, #340

Updated animate.min.css

411b7c0

Made it the new version

added jello to options

dfe9957

Merge pull request #409 from procodeing/gh-pages

750a110

Update project page

Update CSS

0dd0bbc

daneden requested changes May 4, 2020

View reviewed changes

This was linked to issues May 4, 2020

Update Website #837

Closed

Rewrite documentation #835

Closed

eltonmesquita added 2 commits May 4, 2020 18:52

Reviews the docs copy

736b154

Fix some issues with demo-site

7e02691

daneden requested changes May 5, 2020

View reviewed changes

docs/dist/style.css Outdated Show resolved Hide resolved

docs/dist/style.css Outdated Show resolved Hide resolved

eltonmesquita and others added 3 commits May 5, 2020 19:12

Fixes issue with the demo-site playground

0bf61f1

Adjusts tooltip on demo-site

d21d31e

Fix layout issues on mobile and update “close” button for animations …

236286d

…list

daneden approved these changes May 5, 2020

View reviewed changes

eltonmesquita merged commit 626c3ac into dev May 5, 2020

delete-merged-branch bot deleted the feature/new-demo-site branch May 5, 2020 19:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/new demo site #1046

Feature/new demo site #1046

eltonmesquita commented Apr 25, 2020 •

edited

Loading

ianvizarra commented May 1, 2020

jkga commented May 1, 2020

warengonzaga commented May 1, 2020

eltonmesquita commented May 1, 2020

warengonzaga commented May 1, 2020

eltonmesquita commented May 4, 2020

warengonzaga commented May 4, 2020

daneden commented May 4, 2020

daneden commented May 4, 2020

warengonzaga commented May 4, 2020

eltonmesquita commented May 4, 2020

daneden left a comment

eltonmesquita commented May 4, 2020 •

edited

Loading

eltonmesquita commented May 5, 2020 •

edited

Loading

daneden commented May 5, 2020

daneden commented May 5, 2020

daneden commented May 5, 2020

eltonmesquita commented May 5, 2020

Feature/new demo site #1046

Feature/new demo site #1046

Conversation

eltonmesquita commented Apr 25, 2020 • edited Loading

ianvizarra commented May 1, 2020

jkga commented May 1, 2020

warengonzaga commented May 1, 2020

eltonmesquita commented May 1, 2020

warengonzaga commented May 1, 2020

eltonmesquita commented May 4, 2020

warengonzaga commented May 4, 2020

daneden commented May 4, 2020

daneden commented May 4, 2020

warengonzaga commented May 4, 2020

eltonmesquita commented May 4, 2020

daneden left a comment

Choose a reason for hiding this comment

eltonmesquita commented May 4, 2020 • edited Loading

eltonmesquita commented May 5, 2020 • edited Loading

daneden commented May 5, 2020

daneden commented May 5, 2020

daneden commented May 5, 2020

eltonmesquita commented May 5, 2020

eltonmesquita commented Apr 25, 2020 •

edited

Loading

eltonmesquita commented May 4, 2020 •

edited

Loading

eltonmesquita commented May 5, 2020 •

edited

Loading